<template>
  <view class="personal-center" style="background: #f5f9ff; min-height: 100vh;">
    <!-- 标题栏 -->
    <view style="text-align: center; padding: 10px 0;">
      <text style="font-size: 18px; font-weight: bold;">个人中心</text>
    </view>
	
    <!-- 用户信息+收益数据整合区域 -->
    <view style="background-color: #e6f0ff; margin: 15px; border-radius: 12px; padding: 20px;">
      <!-- 用户信息行 -->
      <view style="display: flex; align-items: center; margin-bottom: 15px;">
        <view style="width: 60px; height: 60px; border-radius: 30px; background-color: #fff; margin-right: 15px;"></view>
        <view>
          <view style="display: flex; align-items: center;">
            <text style="font-size: 18px; font-weight: bold;">白乐乐</text>
            <text style="font-size: 14px; color: #ff9900; background-color: #fff8e6; padding: 2px 8px; border-radius: 4px; margin-left: 10px;">VIP会员</text>
          </view>
          <text style="font-size: 12px; color: #666; display: block; margin-top: 5px;">白乐乐超市平安路店</text>
        </view>
      </view>

      <!-- 收益数据行 -->
      <view style="display: flex; justify-content: space-between; margin-bottom: 15px;">
        <view style="text-align: center; flex: 1;">
          <text style="font-size: 14px; color: #666; display: block;">今日收益</text>
          <text style="font-size: 18px; font-weight: bold; display: block; margin-top: 5px;">202.00</text>
        </view>
        <view style="text-align: center; flex: 1; border-left: 1px solid #d9e6ff; border-right: 1px solid #d9e6ff;">
          <text style="font-size: 14px; color: #666; display: block;">本月收益</text>
          <text style="font-size: 18px; font-weight: bold; display: block; margin-top: 5px;">5000.00</text>
        </view>
        <view style="text-align: center; flex: 1;">
          <text style="font-size: 14px; color: #666; display: block;">今年收益</text>
          <text style="font-size: 18px; font-weight: bold; display: block; margin-top: 5px;">20234.00</text>
        </view>
      </view>

      <!-- 账户余额行（深灰色横幅） -->
      <view style="background-color: #333; border-radius: 8px; padding: 12px 15px;">
        <view style="display: flex; justify-content: space-between; align-items: center;">
          <view>
            <text style="font-size: 14px; color: #d4af37; display: block;">账户余额</text>
            <text style="font-size: 16px; font-weight: bold; color: #ffffff; display: block; margin-top: 5px;">3212.00 元</text>
          </view>
          <text style="font-size: 14px; color: #d4af37;">立即提现 ></text>
        </view>
      </view>
    </view>

    <!-- 主功能区域（三个图标选项） -->
    <view style="background-color: #fff; margin: 15px; border-radius: 12px; padding: 15px 0;">
      <view style="display: flex; justify-content: space-around;">
        <view style="text-align: center; width: 33.33%;" @click="navigateTowallet">
          <view style="width: 50px; height: 50px; border-radius: 25px; background-color: #f5f9ff; margin: 0 auto;"></view>
          <text style="font-size: 14px; display: block; margin-top: 8px;">我的钱包</text>
        </view>
        <view style="text-align: center; width: 33.33%;" @click="navigateTosalesperformance">
          <view style="width: 50px; height: 50px; border-radius: 25px; background-color: #f5f9ff; margin: 0 auto;"></view>
          <text style="font-size: 14px; display: block; margin-top: 8px;">销售业绩</text>
        </view>
        <view style="text-align: center; width: 33.33%;" @click="navigateToemployeemanagement">
          <view style="width: 50px; height: 50px; border-radius: 25px; background-color: #f5f9ff; margin: 0 auto;"></view>
          <text style="font-size: 14px; display: block; margin-top: 8px;">员工管理</text>
        </view>
      </view>
    </view>

    <!-- 功能列表区域 -->
    <view style="background-color: #fff; margin: 15px; border-radius: 12px;">
    
      <view @click="navigateToInvite" style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
        <text style="font-size: 16px;">邀请成员</text>
        <text style="color: #999;">></text>
      </view>
  
      <view  style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
        <text style="font-size: 16px;">收银台</text>
        <text style="color: #999;">></text>
      </view>
      
      <view  style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
        <text style="font-size: 16px;">退款中心</text>
        <text style="color: #999;">></text>
      </view>
      
      <view  style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
        <text style="font-size: 16px;">账户安全</text>
        <text style="color: #999;">></text>
      </view>
      
      <view  style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
        <text style="font-size: 16px;">基本设置</text>
        <text style="color: #999;">></text>
      </view>
      
      <view  style="padding: 15px; display: flex; align-items: center; justify-content: space-between;">
        <text style="font-size: 16px;">关于我们</text>
        <text style="color: #999;">></text>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar" style="position: fixed; bottom: 0; width: 100%; display: flex; background-color: #fff; padding: 10px 0; border-top: 1px solid #eee;">
      <view class="tab-item" style="flex: 1; text-align: center;">
        <text style="font-size: 12px; color: #666;">首页</text>
      </view>
      <view class="tab-item" style="flex: 1; text-align: center;">
        <text style="font-size: 12px; color: #666;">消息</text>
      </view>
      <view class="tab-item" style="flex: 1; text-align: center;">
        <text style="font-size: 12px; color: #1a73e8;">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      functionList: [
        '邀请成员',
        '收银台',
        '退款中心',
        '账户安全',
        '基本设置',
        '关于我们'
      ]
    }
  },
  methods: {
    navigateTowallet() {
      uni.navigateTo({
        url: '/pages/b/manager/04/mywallet'
      });
    },
    navigateTosalesperformance() {
      uni.navigateTo({
        url: '/pages/b/manager/04/sales_performance'
      });
    },
    navigateToemployeemanagement() {
      uni.navigateTo({
        url: '/pages/b/manager/04/employee_management'
      });
    },
    navigateToInvite() {
      uni.navigateTo({
        url: '/pages/b/manager/04/business_settlement1' 
      });
    },
  }
}
</script>

<style>
.personal-center {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding-bottom: 60px;
}

/* 统一圆角 */
.personal-center > view {
  border-radius: 12px;
}

/* 按钮点击效果 */
.personal-center > view > view[onclick] {
  transition: background-color 0.2s;
}
.personal-center > view > view[onclick]:active {
  background-color: rgba(0,0,0,0.05);
}
</style>